<template>
  <div class="logistics-manage table-theme">
    <head-title title="设置--物流管理"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left"></div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="searchOption"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
        </div>
      </div>
      <p class="data-number">总数据数：{{ total }}</p>
      <el-table :data="list" border>
        <el-table-column
          label="序号"
          align="center"
          prop="area_id"
        ></el-table-column>
        <el-table-column
          label="省份"
          align="center"
          prop="area_name"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showDialog(scope.row.area_name,scope.row.area_id)">城市</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
          :page-size="limit"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import cityList from './components/city_list.vue'
export default {
  data() {
    return {
      total: 0,
      list: [],
      page: 1,
      limit: 20,
      searchOption: [
        {
          value: 0,
          label: "省份",
        },
      ],
      classSelect: 0,
      selectContent: "",
    };
  },
  created() {
    this.init(1);
  },
  methods: {
    init(e) {
      let data = {
        page: e ? e - 1 : 0,
        limit: this.limit,
      };
      if (this.classSelect === 0 && this.selectContent !== "") {
        data.keyword = this.selectContent;
      }
      this.$http(this.$ApiList.ProvinceList, data).then((res) => {
        this.total = res.datas.count;
        this.list = res.datas.data;
      });
    },
    refreshPage() {
      this.classSelect = 0;
      this.selectContent = "";
      this.page = 1;
      this.init();
    },
    goSearch(classSelect, selectContent) {
      this.classSelect = classSelect;
      this.selectContent = selectContent;
      this.init();
    },
    showDialog(area_name,area_id){
      this.$layer.iframe({
        title:`${area_name}--城市列表`,
        maxmin:true,
        area:['50%','60%'],
        content:{
          content:cityList,
          parent:this,
          data:{
            parent_id:area_id
          }
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.logistics-manage {
}
</style>